<template>
	<view class="main">
		<uni-popup ref="popup" type="center" :maskClick="false">
			<view class="authorize">
				<image class="auth-icon" src="@/static/image/authorize.png" mode=""></image>
				<text class="auth-title">授权申请</text>
				<view class="line">

				</view>
				<text class="auth-content">申请获取您的公开信息（昵称、头像）</text>
				<view class="button-group">

					<button class="cancel-btn" @click="cancel">取消</button>
					<button class="auth-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">授权</button>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import request from '@/static/js/request.js'
	import {
		login
	} from '@/static/js/auth.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	var self;
	export default {
		components: {
			uniPopup
		},
		data() {
			return {

				userInfo: ''
			}
		},

		onLoad() {
			// uni.setNavigationBarTitle({
			// 	title: '首页'
			// });


			// if (uni.getStorageSync('userInfo')) {
			// 	this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			// } else {
			// 	this.userInfo = {};
			// }


		},
		mounted() {
			self = this;
			uni.getSetting({
				success(res) {
					if (res.authSetting['scope.userInfo']) {
						self.login();
					} else {
						self.$refs.popup.open()
					}
				}
			})
		},

		methods: {
			getuserinfo(e) {
				if (e.detail.rawData) {
					self.login();
				}
			},
			login() {
				uni.showLoading({
					title: '正在登录'
				})
				uni.login({
					success: function(loginRes) {
						var code = loginRes.code;
						uni.getUserInfo({
							success: (res) => {
								console.log(res);
								let data = {
									code,
									encryptedData: res.encryptedData,
									iv: res.iv,
									vmp: 'vmp'
								};
								request.post('/api/v1/signup/0', data).then(resp => {
									uni.setStorageSync('userInfo', JSON.stringify(resp.data));
									uni.setStorageSync('isVerified', resp.data.is_confirm == "True" ? true : false)

									uni.hideLoading();
									self.$refs.popup.close();
									uni.redirectTo({
										url: '/pages/index/index'
									})
									
									

								}).catch(e => {
									uni.showToast({
										icon: 'none',
										title: e.message
									})
								})
							},
							fail: () => {
								console.log("未授权");
							}
						})
					}
				});
			},
			checkPage(item, index) {
				if (uni.getStorageSync('userInfo')) {
					self.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
				} else {
					self.userInfo = {};
				}

				// if (index == 1 && !self.userInfo.access_token) {
				// 	this.$refs.popup.open()
				// 	return;
				// }
				this.isActiveIndex = index;
				uni.setNavigationBarTitle({
					title: item.name
				});
				this.footerList.forEach((item2, index2) => {
					if (item.name == item2.name) {
						item2.isActive = true;

					} else {
						item2.isActive = false;
					}
				})


			},
			cancel() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="less" scoped>
	/* 	page {
		background: #F4F5F9;
	} */

	.main {
		/* #ifdef MP-WEIXIN */
		height: 100vh;
		/* #endif */

		/* #ifdef H5 */
		height: calc(100vh - 100rpx);
		/* #endif */
	}

	.page-content {
		/* position: absolute;
		bottom: 100rpx;
		top: 0;
		left: 0;
		right: 0; */
		/* height: calc(100% - 100rpx); */
		/* margin-bottom: 100rpx; */

	}

	.page-content2 {
		/* margin-bottom: 100rpx; */
	}

	.footer {
		position: fixed;
		// z-index: ;
		bottom: 0;
		left: 0;
		right: 0;
		background: #FFFFFF;
		box-shadow: 0 -1px 0 0 #EFEFEF;
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.footer-item {
		flex: 1;
		color: #666666;
		font-size: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.item-img {
		width: 44rpx;
		height: 44rpx;
		margin-bottom: 8rpx;
	}

	.item-name {
		height: 28rpx;
	}

	.message-count {
		color: #FFFFFF;
		font-size: 24rpx;
		background: #EB0824;
		height: 36rpx;
		/* width: 36rpx; */
		padding: 0 10rpx;
		border-radius: 18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 80rpx;
		top: -10rpx;
	}

	.footer-item-active {
		color: #B8212B;
	}

	.authorize {

		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 40rpx 26rpx 44rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.auth-icon {
			width: 66rpx;
			height: 76rpx;
			margin-bottom: 12rpx;
		}

		.auth-title {
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
		}

		.auth-content {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}

		.button-group {
			display: flex;
			align-items: center;
			margin-top: 38rpx;
			width: 400rpx;
		}

		.line {

			height: 2rpx;
			background: #EEEEEE;
			width: 100%;
			margin: 22rpx 0;
		}

		.auth-btn {

			flex: 1;
			// width: 300rpx;
			height: 68rpx;
			background: #B8212B;
			border-radius: 2rpx;
			border: 2rpx solid #B8212B;
			line-height: 68rpx;
			font-size: 28rpx;

			font-weight: 400;
			color: #FFFFFF;
		}

		.cancel-btn {

			flex: 1;
			// width: 300rpx;
			height: 68rpx;
			color: #B8212B;
			border-radius: 2rpx;
			border: 2rpx solid #B8212B;
			line-height: 68rpx;
			font-size: 28rpx;
			margin-right: 20rpx;

			font-weight: 400;

		}
	}
</style>
